<template>  
    <div>  
      <el-form :model="form" ref="form" label-width="120px">  
        <el-form-item label="用户名">  
          <el-input v-model="form.username"></el-input>  
        </el-form-item>  
        <el-form-item label="密码">  
          <el-input type="password" v-model="form.password"></el-input>  
        </el-form-item>  
        <el-form-item label="姓名">  
          <el-input v-model="form.name"></el-input>  
        </el-form-item>  
        <el-form-item label="性别">  
          <el-radio-group v-model="form.gender">  
            <el-radio label="男"></el-radio>  
            <el-radio label="女"></el-radio>  
          </el-radio-group>  
        </el-form-item>  
        <el-form-item label="出生日期">  
          <el-date-picker  
            v-model="form.birthdate"  
            type="date" format="yyyy-MM-dd HH:mm:ss"  
        value-format="yyyy-MM-dd HH:mm:ss" 
            placeholder="选择日期">  
          </el-date-picker>  
        </el-form-item>  
        <el-form-item>  
          <el-button type="primary" @click="addUser">添加用户</el-button>  
        </el-form-item>  
      </el-form>  
    </div>  
  </template>  
    
  <script>  
  import axios from 'axios';  
    
  export default {  
    data() {  
      return {  
        form: {  
          username: '',  
          password: '',  
          name: '',  
          gender: '',  
          birthdate: '',  
        },  
      };  
    },  
    methods: {  
      addUser() {  
        const user = {  
        username: this.form.username,  
        password: this.form.password, 
        name: this.form.name,  
        gender: this.form.gender,  
        birthdate: this.form.birthdate  
      };  
  // 如果和index.js中一样使用/addUser会怎么样？
      axios.post('/api/addUser', user)  
        .then(response => {  
          console.log(response.data);  
          alert('表单提交成功！');  
        })  
        .catch(error => {  
          console.error("提交表单时发生错误！", error);  
          alert('提交表单失败！');  
        });   
      }  
    }  
  };  
  </script>  
    
  <style scoped>  
  /* 可以在这里添加你的样式 */  
  </style>